<script setup lang="ts">
import { ref, reactive } from "vue";
import { apiBaseCol, eventsCol } from "assets/js/constant.js";
import modalCom from "./components/modalCom.vue";
const confirm = function (e: any) {
  console.log(e);
};
const cancel = function (e: any) {
  console.log(e);
};
const visible = ref(false);

// API说明
const dataSource = reactive([
  {
    name: "visible",
    param: "boolean",
    desc: "是否显示弹窗",
    default: "false",
  },
]);

// 事件说明
const eventsDataSource = reactive([
  {
    name: "confirm",
    desc: "点击确定",
    callbackParam: "",
  },
  {
    name: "cancel",
    desc: "点击取消",
    callbackParam: "",
  },
]);
</script>
<template>
  <div class="container">
    <div class="left-box">
      <div class="public-flex-box">
        <div class="public-title-bold">介绍</div>
        <div class="public-content-text">在一组备选项中进行单选选项。</div>
      </div>
      <div class="public-flex-box">
        <div class="public-title-bold">引入</div>

        <pre class="public-content-code">
        <code
          class="language-css"
        >
          import { HxqModal } from "vue-mobile-hxq";
        </code></pre>
      </div>
      <div class="public-outside-title">代码展示</div>

      <div class="public-flex-box">
        <div class="public-title-bold">基础用法</div>
        <pre class="public-content-code">
        <code
          id="code-2"
          class="language-markup line-numbers"
          style="text-align: left"
        >
&lt;script setup lang="ts">


const visible = ref(false);

// 确定事件
const confirm = function (selectedOptions: Object) {
	console.log(selectedOptions);
};
// 取消事件
const cancel = function(e){
	console.log(e);
}



    &lt;/script>
        </code></pre>
        <pre class="public-content-code">
        <code
          id="code-2"
          class="language-markup line-numbers"
          style="text-align: left"
        >
        &lt;hxq-modal
			:visible = "false"
			@confirm="confirm"
			@cancel='cancel'
        >&lt;/hxq-modal>
      </code></pre>
      </div>

      <div class="public-flex-box">
        <div class="public-title-bold">基本参数</div>
        <a-table
          :dataSource="dataSource"
          :columns="apiBaseCol"
          :pagination="false"
        />
      </div>
      <div class="public-flex-box">
        <div class="public-title-bold">事件</div>
        <a-table
          :dataSource="eventsDataSource"
          :columns="eventsCol"
          :pagination="false"
        />
      </div>
    </div>
    <div class="right-box">
      <modalCom></modalCom>
    </div>
  </div>
</template>
<style lang="scss" scoped>
.container {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: space-between;

  .left-box {
    width: calc(72% - 10px);
    height: 100%;
    overflow-y: auto;
  }
  .left-box::-webkit-scrollbar {
    width: 0;
  }
  .right-box {
    width: calc(28% - 10px);
    height: 100%;
    background-color: #fff;
    border-radius: 24px;
  }
}
.van-overlay {
  position: absolute;
}
.van-popup {
  position: absolute;
  width: 100%;
  right: 24px;
}
</style>
